<template>
	<view class="phone">
		<image src="http://106.14.56.171:15016/images/phone.png" mode=""></image>

		<view class="currentPhone">
			<text>当前手机号：</text>
			<text>{{phone}}</text>
		</view>

		<view class="genga" @click="changePhone">
			<text>更换手机号</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				phone: '', //手机号
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onShow(e) {
			this.phone = this.userInfo.phone || '';
		},
		onLoad() {
			this.androidIos = getApp().globalData.androidIos
		},
		methods: {
			// 跳转到更改手机号
			changePhone() {
				let data = {
					phone: this.phone,
					appId: this.androidIos,
				}
				this.$httpNew.get('authApi/auth/GetVerificationCodeByOldPhone', data).then(res => {
					if (res == null) {
						uni.navigateTo({
							url: './user_prooFread'
						})
					}
				}).catch(errCatch => {
					if (errCatch.errMsg == '[A0006] 验证码已发送，请勿重新点击') {
						uni.navigateTo({
							url: './user_prooFread'
						})
					}
				})

			}
		}
	};
</script>

<style scoped>
	.phone {
		display: flex;
		flex-flow: column;
		flex-wrap: wrap;
		align-items: center;
	}

	.phone image {
		margin-top: 140rpx;
		width: 100rpx;
		height: 140rpx;
	}

	.currentPhone {
		margin-top: 80rpx;
		display: flex;
		flex-flow: column;
		flex-wrap: wrap;
		align-items: center;
	}

	.genga {
		width: 410rpx;
		height: 110rpx;
		line-height: 110rpx;
		border-radius: 56rpx;
		/* box-shadow: 2px 4px 1px #888888; */
		color: #B4001E;
		font-weight: 600;
		text-align: center;
		background-color: #fff;
		margin-top: 220rpx;
	}
</style>
